Provides a calendar-based input method for users to specify a date.
Examples
Usage
The date picker allows users to enter a date by selecting a specific date or a range of dates from a calendar, and also by typing it in.
Do:
give the user the option to be able to manually enter the date into the input date field
show the expected date format in the guidance text
provide clear feedback when a user enters an invalid date, along with instructions on how to correct the error
use two separate date picker components: one for the start date (e.g. the start date of a learning course) and another for the end date (e.g. the end date of the learning course) - together, these fields form a date range that defines the selected period
ensure that when users select both a start and end date, the end date cannot be earlier than the start date
show clearly what start and end date the user has selected
have the date auto-filled in for date fields that need the same date information in later sections of a form
Avoid:
having a pre-populated default date value in the date field if there is no certainty the user will choose that default date